<template>
	<div class="passwordBox">
		<div class="center passwordbox" v-show="showpwd">
			<p style="font-size:18px;color: #989696;margin-top: 30px">个人信息确认</p>
			<div style="border-top: 3px solid #999999;margin-top: 20px
			"></div>
			<div style="width:31.2vw;height:340px;margin:0 auto;margin-top: 30px">
				<div class="info1">
					<span class="inputTitle">原始密码</span><input type="" name="" v-model="oldPwd">
				</div>
				<div class="info1">
					<span class="inputTitle">新密码</span><input type="password" name="" v-model="pwd">
				</div>
				<div class="info1">
					<span class="inputTitle">重复密码</span><input type="password" name="" v-model="confirmPwd">
				</div>
				<p style="text-align: center;clear: both;font-size:1vw;margin-top: 10px;color: red" v-show="message">
					修改失败，请检查输入是否正确
				</p>
			</div>
			<div><button class="btn" style="background-color: #ffcc00;color: white;cursor: pointer;" @click="confirm">确认</button><button class="btn" style="background-color: #dcdcdc;margin-left: 5vw" @click="cancel">取&nbsp&nbsp&nbsp&nbsp消</button></div>

		</div>
		
	</div>
</template>
<script>
	export default {
		props:['showpwd'],
		data(){
			return{
				userinfo:{},
				pwd:"",
				confirmPwd:"",
				oldPwd:"",
				isTrue:true,
				message:false,
				myshowpwd:this.showpwd
			}
		},
		watch:{
			showpwd(val){
				 this.myshowpwd = val
				},
			myshowpwd(val){
            //xxcanghai 小小沧海 博客园
            this.$emit("on-result-change",val);//③组件内对myResult变更后向外部发送事件通知
        }
		},
		mounted(){
			this.userinfo = JSON.parse(sessionStorage.userinfo).data
		},
		methods:{
			confirm:function () {
				// body...
				var _this = this
				this.$http.post(`${this.URL}/api/user/updatePSWD`,{
					YHBM:_this.userinfo.YHBM,
					PSWD:_this.pwd,
					REPSWD:_this.confirmPwd,
					OLDPSWD:_this.oldPwd
				})
				.then(function(res){
					console.log(res)
					if (res.data.error_code==0) {
						_this.myshowpwd = false;
					}
					else{
						_this.message = true
					}
				})
			},
			cancel:function(){
				this.myshowpwd = false;
			}
		}
	}
</script>
<style scoped>

	*{
		margin: 0;
		padding: 0;
	}
	input{
		height: 60px;
		width: 18.22vw;
		border: #dcdcdc 2px solid;
		border-radius: 8px;
		margin-left: 4vw;
		outline: none;
		padding: 1vw
	}
	button{
		cursor: pointer;
	}
	.inputTitle{
		width: 5vw;
		display: inline-block;
	}
	.passwordbox{
		
		text-align: center;
		position: fixed;
		width: 41.6vw;
		height: 600px;
		overflow: auto;
		margin:auto;
		top: 0;bottom: 0;left: 0;right: 0;
		z-index: 999
	}
	.btn{
		width: 13vw;
		height: 3vw;
		border:none;
		outline: none;
		font-size: 24px;
		border-radius: 10px
	}
	.center{
		width: 41.6vw;
		height: 600px;
		background: white;
		position: absolute;
		z-index: 998;
		top: 0;left:0;right: 0;bottom: 0;
		margin: auto;overflow: auto;
		text-align: center;
		border: 2px solid #dcdcdc
	}
	.info1{
		float: left;
		text-align: left;
		font-size: 1.25vw;
		line-height: 80px
	}
</style>